<template>
  <div class="evaluation_record">
    <navigate>测评中心</navigate>
    <div>
      <div class="input_box dis_flex just_center">
        <searchInput
          class="search_input"
          type="text"
          v-model="value"
          placeholder="搜索测评量表名称"
          @input="handleSearch"
          @clearInput="clearInput"
        ></searchInput>
        <div class="dis_flex" @click="openPop">
          <div class="filtrate_txt">筛选</div>
          <img
            src="@/assets/images/evaluate/filtrate_icon.png"
            alt=""
            class="filtrate_img"
          />
        </div>
      </div>

      <div class="record_box">
        <div class="" v-for="(item, index) in recordList" :key="index">
          <div class="time_box dis_flex">
            <img
              src="@/assets/images/common/grey_clock.png"
              alt=""
              class="clock_img"
            />
            <div class="date_time">{{ item.time }}</div>
          </div>
          <div>
            <div
              class="item_record"
              v-for="(r, index) in item.list"
              :key="index"
              @touchstart="startLongPress(r)"
              @touchend="endLongPress"
              @touchcancel="endLongPress"
            >
              <div class="dis_flex">
                <img :src="r.rating_scale_cover" alt="" class="item_img" />
                <div class="right_info">
                  <div class="dis_flex">
                    <div class="item_tit">{{ r.rating_scale_name }}</div>
                    <img
                      src="@/assets/images/evaluate/new_icon.png"
                      alt=""
                      class="new_img"
                      v-if="false"
                    />
                  </div>
                  <div class="info_box dis_flex">
                    <div class="item_info">
                      {{ r.answer_role == 1 ? "用户答题" : "家长答题" }}
                    </div>
                    <div class="item_info">
                      {{
                        r.is_explain == 1
                          ? "未解读"
                          : r.is_explain === 2
                          ? "申请中"
                          : "已解读"
                      }}
                    </div>
                  </div>
                  <div class="content_box" v-if="r.introduction">
                    <div
                      class="content"
                      :class="{ 'content-hidden': !r.isUnfold }"
                    >
                      {{ r.introduction }}
                    </div>
                    <div
                      class="unfold-btn"
                      v-if="r.needUnfold"
                      @click="toggleUnfold(r)"
                    >
                      {{ r.isUnfold ? "收起" : "展开详情" }}
                      <img
                        :style="{
                          transform: r.isUnfold
                            ? 'rotate(180deg)'
                            : 'rotate(0)',
                        }"
                        src="@/assets/images/common/unfold.png"
                        alt=""
                      />
                    </div>
                  </div>
                  <div class="item_permission dis_flex">
                    <div class="permission_txt">查看权限:</div>
                    <div class="dis_flex">
                      <img
                        :src="
                          r.result_read_auth.includes('3')
                            ? inactiveIcon
                            : activeIcon
                        "
                        alt=""
                        class="img_icon"
                      />
                      <div class="left_txt">用户本人</div>
                    </div>
                    <div class="dis_flex">
                      <img
                        :src="
                          r.result_read_auth.includes('4')
                            ? inactiveIcon
                            : activeIcon
                        "
                        alt=""
                        class="img_icon"
                      />
                      <div class="left_txt">用户家长</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="dividing_line"></div>
              <div class="dis_flex just_between">
                <div class="fraction_txt">
                  测评整体评分：{{ r.total_score }}分
                </div>

                <div
                  class="check_btn"
                  v-if="r.result_read_auth.includes('3')"
                  @click.stop="checkReport(r)"
                >
                  查看报告
                </div>
                <div class="check_btn btn_02" v-else>不可查看</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 自我测评记录 -->
        <!-- <selfRecord :filterInfo="filterInfo" v-if="pageType==1" /> -->
        <!-- 任务测评记录 -->
        <!-- <taskRecord v-if="pageType == 2" /> -->
        <!-- 筛选弹框 -->
        <filterPop
          :isShowPop="isShowFilter"
          @closeFilterPop="closeFilterPop"
          :type="1"
        />

        <recordOperation
          :isShowOperationPop="isShowOperationPop"
          :type="1"
          :isExplain="isExplain"
          @buttonOperation="buttonOperation"
        />
      </div>
      <div class="no_data_txt">-- 无更多测评任务了 —-</div>
    </div>
  </div>
</template>

<script>
import {
  querySelfRecord,
  delSelfEvaluation,
  selfApplyExplain,
  queryApplyNum,
} from "@/api/evaluation/index";

import recordOperation from "./components/recordOperation.vue";
import searchInput from "@/components/searchInput/index.vue";
import filterPop from "./components/filterPop.vue";
export default {
  data() {
    return {
      value: "",
      isShowFilter: false,
      filterInfo: {},
      pageType: null, //1为自我 2为任务
      recordList: [],
      activeIcon: require("@/assets/images/common/radio1.png"),
      inactiveIcon: require("@/assets/images/common/radio11.png"),
      isComment: 0,
      searchTimer: null, // 用于存储定时器
      pageSize: 10,
      page: 1,
      isShowOperationPop: false,
      currentSelfId: null,
      isExplain: null,
      appltInfo: {},
      longPressTimer: null, // 用于存储长按定时器
    };
  },
  components: {
    searchInput,
    filterPop,
    recordOperation,
  },
  created() {
    this.pageType = this.$route.query.type;
    this.getSelfList();
    this.getApplyNum();
  },
  methods: {
    async getApplyNum() {
      const res = await queryApplyNum();
      if (res.code == 200) {
        this.appltInfo = res.data;
      }
    },
    buttonOperation(val) {
      this.isShowOperationPop = false;
      if (val == "detail") {
        this.$router.push(`/evaluateExport?id=${this.currentSelfId}&type=1`);
      } else if (val == "apple") {
        this.$popup({
          visible: false,
          title: "申请解读",
          message: `<div>申请解读可以得到咨询师对本报告的</div>
          <div>建议及意见。确定要向<span style="color:#00aeff">${this.appltInfo.user_name}</span>申请吗?</div>
            <div style="white-space: nowrap;font-size: 16px;color: #959595;">(今日剩余申请次数：${this.appltInfo.explain_num}次)</div>
          `,
          confirmOperate: async () => {
            let res = await selfApplyExplain({ id: this.currentSelfId });
            if (res.code == 200) {
              this.getSelfList();
            }
          },
        });
      } else if (val == "del") {
        this.$popup({
          visible: false,
          title: "提示",
          message: "确定要删除此记录吗？",
          confirmOperate: async () => {
            let res = await delSelfEvaluation({ id: this.currentSelfId });
            if (res.code == 200) {
              this.$toast.success({ message: "删除成功！" });
              this.getSelfList();
            }
          },
        });
      }
    },
    //查看报告
    checkReport(item) {
      this.$router.push(`/evaluateExport?id=${item.id}&type=1`);
    },
    startLongPress(v) {
      this.currentSelfId = v.id;
      this.isExplain = v.is_explain;
      this.longPressTimer = setTimeout(() => {
        this.isShowOperationPop = true;
      }, 500);
    },
    endLongPress() {
      clearTimeout(this.longPressTimer);
    },
    toggleUnfold(item) {
      this.$set(item, "isUnfold", !item.isUnfold);
    },
    // 检查内容是否需要展开按钮
    checkNeedUnfold() {
      this.$nextTick(() => {
        const contents = document.querySelectorAll(".content");
        contents.forEach((content, index) => {
          const lineHeight = parseInt(
            window.getComputedStyle(content).lineHeight
          );
          const height = content.scrollHeight;
          const needUnfold = height > lineHeight * 4;
          this.$set(this.recordList[index], "needUnfold", needUnfold);
          this.$set(this.recordList[index], "isUnfold", false);
        });
      });
    },
    // 防抖处理搜索
    handleSearch(value) {
      this.name = value;
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }
      this.searchTimer = setTimeout(() => {
        this.getSelfList();
      }, 500);
    },
    clearInput() {
      this.name = "";
      this.getSelfList();
    },
    // 获取列表
    async getSelfList() {
      let par = {
        pageSize: this.pageSize,
        page: this.page,
        start_time: this.filterInfo.start_time,
        end_time: this.filterInfo.end_time,
        answer_role: this.filterInfo.answer_role,
        name: this.name,
        type_id: this.filterInfo.type_id,
      };
      let res = await querySelfRecord(par);
      this.recordList = Object.keys(res.data).map((yearMonth) => {
        return {
          time: yearMonth,
          list: res.data[yearMonth].map((item) => ({
            ...item,
            isUnfold: false,
            needUnfold: false,
          })),
        };
      });
      this.checkNeedUnfold();
    },
    openPop() {
      this.isShowFilter = true;
    },
    closeFilterPop(val) {
      this.isShowFilter = false;
      this.filterInfo = val;
      this.getSelfList();
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep.van-radio {
  margin-right: 7px;
  &:last-child {
    margin-right: 0;
  }
}
::v-deep .van-radio__label {
  font-size: 14px;
  color: #333333;
}
::v-deep .van-radio__icon .van-radio__icon--round .van-radio__icon--checked {
  width: 15.33px;
  height: 15.33px;
}
::v-deep .van-radio-group {
  display: flex;
}
.img-icon {
  width: 15.33px;
  height: 15.33px;
}
.dis_flex {
  display: flex;
  align-items: center;
}
.just_center {
  justify-content: center;
}
.just_between {
  justify-content: space-between;
}
.img_icon {
  width: 15.33px;
  height: 15.33px;
  margin-right: 5px;
}
.left_txt {
  font-size: 12.67px;
  margin-right: 13.33px;
}
.evaluation_record {
  background-color: #f4f6fa;
}
.input_box {
  width: 100%;
  height: 50px;
  background: #ffffff;
}
.search_input {
  width: 270px !important;
  height: 36.67px;
  margin: 0 10px 0 0 !important;
  background: #f4f6fa;
}
.filtrate_txt {
  color: #333333;
  font-size: 14px;
  font-size: 14px;
}
.filtrate_img {
  width: 13.33px;
  height: 13.33px;
  margin-left: 5.67px;
}
.record_box {
  padding: 0 10px;
}
.time_box {
  margin: 17px 0;
}
.clock_img {
  width: 12px;
  height: 12px;
  margin-right: 7.33px;
}
.date_time {
  color: #999999;
  font-size: 12px;
  line-height: 12px;
}
.item_record {
  padding: 13.33px 10px 8.33px 10px;
  background: #ffffff;
  margin-bottom: 10px;
}
.item_img {
  width: 80px;
  height: 80px;
  margin-right: 13.33px;
}
.right_info {
  min-width: 0;
}
.item_tit {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16.67px;
  line-height: 16.67px;
  color: #333333;
}
.new_img {
  width: 20px;
  height: 20px;
  margin-left: 6.33px;
}
.info_box {
  margin: 13.33px 0 12.33px;
}
.item_info {
  color: #666666;
  font-size: 11.33px;
  line-height: 11.33px;
  border: 0.33px solid #aaaaaa;
  border-radius: 4.67px;
  padding: 4px 7px;
  margin-right: 3.33px;
  &:last-child {
    margin-right: 0;
  }
}
.item_permission {
  font-size: 12px;
  line-height: 12px;
  color: #888888;
}
.permission_txt {
  margin-right: 10px;
}
.dividing_line {
  border-bottom: 0.67px solid #dddddd;
  margin: 13.33px 0 8.33px;
}
.fraction_txt {
  color: #666666;
  font-size: 14px;
  font-size: 14px;
}
.check_btn {
  width: 83.33px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  font-size: 14.67px;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 5.33px;
  color: #ffffff;
}
.btn_02 {
  opacity: 0.5;
}
.content_box {
  margin: 10px 0;
  .content {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    &.content-hidden {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
  }
  .unfold-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00aeff;
    font-size: 14px;
    margin-top: 8px;
    cursor: pointer;
    img {
      width: 12px;
      height: 12px;
      margin-left: 4px;
      transition: transform 0.3s;
    }
  }
}
.no_data_txt {
  font-size: 14px;
  margin: 32px auto;
  text-align: center;
}
</style>
